<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String realPath = request.getContextPath();   
%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>南网图讯-首页</title>
    <link type="text/css" href="${ctx}/zenithsun/news/mobile/css/basic.css" rel="stylesheet">
    <link type="text/css" href="${ctx}/zenithsun/news/mobile/css/index.css" rel="stylesheet">

    <script type="text/javascript" src="${ctx}/zenithsun/js/jquery-1.10.1.min.js"></script>
</head>
<body>

<!--搜索模块-->
<div class="search-grid">
	<div class="search-wrap">
		<div class="search-regit clearfix">
			<input type="text" class="search-Txt" name="search-Txt" value="" id="searchValue" placeholder="关键词搜索"/>
			<input type="submit" class="search-btn j-searchBtn" name="search-btn" value="" onclick="doSearch();"/>
		</div>
		<div class="search-floatCont" id="newsList">
			<ul class="search-content">
			</ul>
		</div>
		
	</div>
</div>

<script>
	var realPath = "<%=realPath%>"; //地址

	$(function(){
		$(".j-searchBtn").click(function(){
			$(".search-floatCont").slideDown();
		});
	});
	
	//查询按钮点击事件
	var $searchList = function(){
			$(".search-floatCont").slideDown();
		}
	

	var pageNo = 1; //当前页码
	var limit = 10; //每页的新闻数量
	
	//点击搜索按钮
	function doSearch(){
		//设置当前页
    	pageNo = 1; 
		//查询
		search();
	}

	 //查询
	 function search(){
		var title=$("#searchValue").val();
		if(title==undefined)
		{
			title="";
		}
		else{
			title = trim(title); //删除左右两端的空格
		}
	 	var paramData = {};
	 	paramData["pageNo"] = pageNo;
	 	paramData["limit"] = limit;
	 	paramData["title"] = title;
	 	paramData["state"] = 3;
	 	//获取查询数据
	 	$.post(realPath+"/path/newsinfo/listNewsinfoForJson", paramData,
	 			function(result) {
	 				if (result.state == 'Success') {
	 					//显示新闻列表
	 					showNewsList(result.content, title);
	 				} else {
	 					alert("操作失败,原因："+result.content);
	 				}
	 			}
	 		);
	 }
	
	//显示新闻列表
	 function showNewsList(data, searchValue){
		var content = "<ul class=\"search-content\">";
		 var currentUrl = this.location.href;
		//遍历数据生成模板
		for(var i=0; i<data.items.length; i++){
			var newsUrl = realPath + "/path/newsinfo/viewnewsphone?id=" + data.items[i]["id"];
			content += "<li><a href=\"" + newsUrl + "\">" + changeKeyWordStytle(data.items[i]["title"], searchValue) + "</a></li>";
		}
		
		content += "</ul>";
	 	document.getElementById ("newsList").innerHTML = content;
	}

	 //改变内容中关键字的样式
	 function changeKeyWordStytle(content, keyword){
	 	if(content == null) return "";
	 	if(keyword == "") return content;
	 	//判断是否包含字符串
	 	var newContent = content;
	 	if(content.indexOf(keyword) > -1){
	 		//拆分字符串
	 		var str=content.split(keyword);
	 		newContent = str[0];
	 		for (var i=1;i<str.length ;i++ )   
	 	    { 
	 			newContent += "<i>" + keyword + "</i>"; //关键字颜色变化
	 			newContent += str[i];
	 	    }
	 	}
	 	return newContent;
	 }

	//删除左右两端的空格
	function trim(str){
	    return str.replace(/(^\s*)|(\s*$)/g, "");
	}
</script>
</body>
</html>